<template>
    <div class="" style="width:100%;color:white;font-size:14px;display:flex;justify-content: space-between;padding:20px;margin-top:8vh;">
        <div style="width:60%;">
            <div>
                <div><span><i class="el-icon-s-marketing"></i></span><span  style="color:white;">扫码分布</span></div>
                <div style="height:50vh; background-color:rgba(3,3,3,0.5);justify-content:space-between;">
                    <div id="mapData" style="width:40vw;height:50vh;float:right;"></div>
                    <div style="color:white;width:120px;display:flex;flex-wrap:wrap;">
                        <div v-for="(item,index) in cityCode" :key="index" style="width:100%;height:20px;display:flex;justify-content:space-between;">
                            <div style="margin-left:5px;">{{index+1}}</div>
                            <div style="">{{item.name}}</div>
                            <div style="">{{item.value}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div><span><i class="el-icon-s-marketing"></i></span><span  style="color:white;">扫码分布</span></div>
                <div id="treeCode" style="height:200px;background-color:rgba(3,3,3,0.5);"></div>
            </div>
        </div>
        <div style="width:35%;background-color:rgba(3,3,3,0.4);">
            <div>
                <div style="margin:10px 0 ;"><span><i class="el-icon-s-marketing" style="color:#0076FF;font-size:16px;"></i></span><span style="color:white;margin-left:5px;">打码TOP5</span></div>
                <div id="codingTop" style="height:35vh;background-color:rgba(3,3,3,0.5);"></div>
            </div>
            <div>
                <div style="margin:10px 0 ;"><span><i class="el-icon-s-marketing" style="color:#0076FF;font-size:16px;"></i></span><span style="color:white;margin-left:5px;">赋码类型</span></div>
                <div style="height:35vh;">{{treeDatass[1]}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import axios from "axios"
import { company_findById } from "@/request/api.js"
import { init } from 'echarts';
import chinas from '../../../common/100000.json'
export default {
    data() {
        return {
			topData: [], //top5数据
            // treeData:[],
            treeDatass:[],
            cityCode:[],
            weatherData: [],
        };
    },
    props: {
        treeDatas: {
            type: Array
        },
        treeDatasX: {
            type: Array
        }
    },
    computed: {

    },
    mounted() {
        this.init()
        this.init1()
        this.init2()
        // this.init3()
    },
    methods: {
        init(){
            //打码TOP5
            // axios.post("http://192.168.0.148:8880/plant/box/scanTop").then((res) =>{
            axios.post("https://bbgy.cpzsyun.com:82/api/plant/box/scanTop").then((res) =>{
                // console.log(res,'1515')
                this.yieldData = res.data.data
                var keys=[];
                var values=[];
                var obj = this.yieldData
                for(var key in obj){
                    keys.push(key);
                    values.push(obj[key]);
                }
                let arr=[]
                for(var a=0;a<keys.length;a++){
                    var object = {}
                    object.name = keys[a]
                    object.value = values[a]
                    arr.push(object)
                }
                let arr2 = arr.sort(function(a,b){
                    return b.value-a.value
                })
                this.topData = arr2.slice(0,5)

                let myEchart = echarts.init(document.getElementById("codingTop"));
                let option = {
                    title:{
                    textStyle: {
                        color:['white'],
                        fontSize: 14,

                    },
                },
                legend:{
                    bottom: 20,
                    left: 'center',
                    textStyle: {
                        color: 'white',
                    },
                    // data: keys,
                },
                xAxis:{
                    axisLine: {
                        show: false
                    }
                },
                yAxis:{
                    axisLine: {
                        show: false
                    }
                },
                series:[{
                    // name:'赋码量',
                    type:"pie",
                    radius: '50%',
                    center: ['40%', '35%'],
                    // clockwise: true,
                    label:{
                        show: true,
                        position: 'outside',
                        fontSize: 10,
                        formatter: function(paramss) {
                            const percent = paramss.percent + '%'
                            return [`${percent}`].join('\n')
                        },
                        // edgeDistance: '10%',
                    },
                    // labelLine: {
                        //     length: 2,
                    //     length2: 5
                    // },
                    roseType: 'radius',
                    data:this.topData,

                }]
                };
                // console.log(this.topData,'1515')
                myEchart.setOption(option);
            })
        },
        init1(){
                this.$nextTick(function () {
                    let myEchartss = echarts.init(document.getElementById("treeCode"));
                    let option = {
                        title:{
                            // text:"扫码量",
                        textStyle: {
                            color:['white'],
                            fontSize: 14,
                        },
                        top: 20
                    },
                    // tooltip:{},
                    // legend:{},
                    xAxis:{
                        type : 'category',
                        data: this.treeDatasX,
                        axisLabel: {
                            width: 60,
                            height:90,
                            color: ['white'],
                            fontSize: 10,
                            interval: 0,
                            overflow: 'truncate',
                        },
                    },
                    yAxis:{
                        axisLabel: {
                            color: ['white'],
                            fontSize: 10,
                        }
                    },
                    grid:{
                            top:30,
                            width:"auto",
                            height: "70%"
                    },
                    series:[{
                        // name:'扫码量',
                        type:"bar",
                        data: this.treeDatas,
                        backgroundStyle: {
                            color: '#5C7BD9'
                        }
                    }]
                    };
                        myEchartss.setOption(option);
                    })
        },
        init2(){
            // axios.post("http://192.168.0.148:8880/plant/traceinfo/distribution").then((res) =>{
            axios.post("https://bbgy.cpzsyun.com:82/api/plant/traceinfo/distribution").then((res) =>{
                // console.log(res,'市扫码分布')
                // let resData = res.data.data
                // console.log(this.cityCode)
                var abc = res.data.data
                var keys=[];
                var values=[];
                var obj = abc
                for(var key in obj){
                    keys.push(key);
                    values.push(obj[key]);
                }
                let arr=[]
                for(var a=0;a<keys.length;a++){
                    var object = {}
                    object.name = keys[a]
                    object.value = values[a]
                    arr.push(object)
                }
                this.cityCode = arr
                // console.log(this.cityCode,'1212')


                let myEchartsss = echarts.init(document.getElementById("mapData"));
                var mapName = "china"
                echarts.registerMap(mapName, chinas);
                let option = {
                    tooltip: {
                        triggerOn: "click",
                        formatter: function(e, t, n) {
                            if(e.value){
                                return .5 == e.value ? e.name + "：扫码量" : e.seriesName + "<br />" + e.name + "：" + e.value
                            }else{
                                return .5 == e.value ? e.name + "：扫码量" : e.seriesName + "<br />" + e.name + "：" + 0
                            }
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 1000,
                        left: 10,
                        bottom: 10,
                        itemWidth:20,
                        itemHeight:10,
                        showLabel: !0,
                        textStyle: {
                            color:"#FFFFFF",
                        },
                        // text: ["高", "低"],
                        pieces: [{
                            gt: 100,
                            label: "> 100 人",
                            color: "#7f1100"
                        }, {
                            gte: 10,
                            lte: 100,
                            label: "10 - 100 人",
                            color: "#ff5428"
                        }, {
                            gte: 1,
                            lt: 10,
                            label: "1 - 9 人",
                            color: "#ff8c71"
                        }, {
                            value: 0,
                            color: "#ffffff"
                        }],
                        show: !0
                    },
                    geo: {
                        map: mapName,
                        roam: !1,
                        scaleLimit: {
                            min: 1,
                            max: 2
                        },
                        zoom: 1.5,
                        top: 80,
                        label: {
                            normal: {
                                show: !0,
                                fontSize: "6",
                                color: "rgba(0,0,0,0.7)"
                            }
                        },
                        itemStyle: {
                            normal: {
                                //shadowBlur: 50,
                                //shadowColor: 'rgba(0, 0, 0, 0.2)',
                                borderColor: "rgba(0, 0, 0, 0.2)"
                            },
                            emphasis: {
                                areaColor: "#f2d5ad",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                borderWidth: 0
                            }
                        }
                    },
                    series: [{
                        name: "扫码量",
                        type: "map",
                        map: mapName,
                        geoIndex: 0,
                        data:this.cityCode,
                        top: '5',
                        bottom: '10',
                    }]

                };
                myEchartsss.setOption(option);

            })
        },
    },
	created(){

	}
};
</script>
<style scoped>

</style>
